<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账号管理 - 企业福利商城管理系统</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            display: flex;
        }
        
        /* 侧边栏 */
        .sidebar {
            width: 220px;
            background-color: white;
            height: 100vh;
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 100;
            display: flex;
            flex-direction: column;
        }
        
        .sidebar-header {
            padding: 20px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .admin-logo {
            display: flex;
            align-items: center;
        }
        
        .admin-logo-icon {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
            color: white;
            font-weight: bold;
            font-size: 18px;
        }
        
        .admin-logo-text {
            font-size: 18px;
            font-weight: 600;
            color: #f56c6c;
        }
        
        .sidebar-menu {
            flex: 1;
            padding: 20px 0;
            overflow-y: auto;
        }
        
        .menu-item {
            padding: 12px 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            transition: all 0.3s;
        }
        
        .menu-item:hover {
            background-color: #f5f7fa;
        }
        
        .menu-item.active {
            background-color: #fef0f0;
            color: #f56c6c;
            border-right: 3px solid #f56c6c;
        }
        
        .menu-icon {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }
        
        .sidebar-footer {
            padding: 15px 20px;
            border-top: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
        }
        
        .admin-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #f56c6c;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: bold;
            margin-right: 10px;
        }
        
        .admin-info {
            flex: 1;
        }
        
        .admin-name {
            font-weight: 500;
            font-size: 14px;
        }
        
        .admin-role {
            color: #909399;
            font-size: 12px;
        }
        
        /* 主内容区域 */
        .main-content {
            flex: 1;
            margin-left: 220px;
            padding: 20px;
        }
        
        /* 顶部导航 */
        .top-nav {
            background-color: white;
            border-radius: 12px;
            padding: 15px 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .page-title {
            font-size: 22px;
            font-weight: 600;
            display: flex;
            align-items: center;
        }
        
        .page-title-icon {
            width: 32px;
            height: 32px;
            background-color: #f56c6c;
            border-radius: 6px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
            color: white;
        }
        
        .top-actions {
            display: flex;
            gap: 10px;
        }
        
        .action-btn {
            padding: 8px 16px;
            background-color: white;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        
        .action-btn.primary {
            background-color: #f56c6c;
            color: white;
            border-color: #f56c6c;
        }
        
        /* 筛选区域 */
        .filter-section {
            background-color: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .filter-row {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .filter-group {
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        
        .filter-label {
            margin-bottom: 8px;
            font-size: 14px;
            color: #606266;
        }
        
        .filter-input {
            height: 36px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            padding: 0 12px;
            font-size: 14px;
        }
        
        .filter-select {
            height: 36px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            padding: 0 12px;
            font-size: 14px;
            background-color: white;
        }
        
        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        /* 批量操作区域 */
        .batch-section {
            background-color: white;
            border-radius: 12px;
            padding: 15px 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .batch-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .batch-select {
            display: flex;
            align-items: center;
        }
        
        .batch-actions {
            display: flex;
            gap: 10px;
        }
        
        .batch-btn {
            padding: 6px 12px;
            background-color: white;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
        }
        
        .batch-btn.danger {
            background-color: #fef0f0;
            color: #f56c6c;
            border-color: #fbc4c4;
        }
        
        .total-text {
            color: #606266;
            font-size: 14px;
        }
        
        /* 数据表格区域 */
        .table-section {
            background-color: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }
        
        .data-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .data-table th {
            text-align: left;
            padding: 12px 15px;
            border-bottom: 1px solid #f0f0f0;
            color: #606266;
            font-weight: 500;
            background-color: #fafafa;
        }
        
        .data-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .table-checkbox {
            width: 40px;
        }
        
        .account-info {
            display: flex;
            align-items: center;
        }
        
        .account-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #409EFF;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: bold;
            margin-right: 10px;
            font-size: 14px;
        }
        
        .account-details {
            display: flex;
            flex-direction: column;
        }
        
        .account-name {
            font-weight: 500;
            margin-bottom: 2px;
        }
        
        .account-id {
            color: #909399;
            font-size: 12px;
        }
        
        .status-badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .status-active {
            background-color: #f0f9ff;
            color: #409EFF;
        }
        
        .status-inactive {
            background-color: #f5f5f5;
            color: #909399;
        }
        
        .role-badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .role-employee {
            background-color: #f0f9ff;
            color: #409EFF;
        }
        
        .role-manager {
            background-color: #f0f9ec;
            color: #67C23A;
        }
        
        .action-buttons {
            display: flex;
            gap: 8px;
        }
        
        .action-btn-small {
            padding: 4px 8px;
            background-color: white;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }
        
        .action-btn-small.primary {
            background-color: #409EFF;
            color: white;
            border-color: #409EFF;
        }
        
        .action-btn-small.warning {
            background-color: #fdf6ec;
            color: #E6A23C;
            border-color: #f5dab1;
        }
        
        .action-btn-small.danger {
            background-color: #fef0f0;
            color: #F56C6C;
            border-color: #fbc4c4;
        }
        
        /* 分页区域 */
        .pagination-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }
        
        .pagination-info {
            color: #606266;
            font-size: 14px;
        }
        
        .pagination {
            display: flex;
            list-style: none;
        }
        
        .pagination-item {
            width: 32px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 4px;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.3s;
            font-size: 14px;
        }
        
        .pagination-item.active {
            background-color: #f56c6c;
            color: white;
        }
        
        .pagination-item:hover:not(.active) {
            background-color: #f5f7fa;
        }
        
        /* 响应式设计 */
        @media (max-width: 1200px) {
            .filter-row {
                flex-wrap: wrap;
            }
            
            .filter-group {
                flex: 1 0 45%;
            }
        }
        
        @media (max-width: 768px) {
            .sidebar {
                width: 60px;
            }
            
            .sidebar-header .admin-logo-text,
            .menu-item span,
            .admin-info {
                display: none;
            }
            
            .main-content {
                margin-left: 60px;
            }
            
            .filter-group {
                flex: 1 0 100%;
            }
            
            .batch-section {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            
            .batch-actions {
                width: 100%;
                justify-content: space-between;
            }
            
            .batch-btn {
                flex: 1;
                text-align: center;
            }
            
            .pagination-section {
                flex-direction: column;
                gap: 15px;
            }
        }
        
        @media (max-width: 480px) {
            .top-nav {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .top-actions {
                margin-top: 15px;
                width: 100%;
                justify-content: space-between;
            }
            
            .action-btn {
                flex: 1;
                text-align: center;
            }
            
            .data-table {
                display: block;
                overflow-x: auto;
                white-space: nowrap;
            }
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <div class="admin-logo">
                <div class="admin-logo-icon">管</div>
                <div class="admin-logo-text">管理系统</div>
            </div>
        </div>
        
        <div class="sidebar-menu">
            <div class="menu-item">
                <div class="menu-icon">📊</div>
                <span>数据看板</span>
            </div>
            <div class="menu-item active">
                <div class="menu-icon">👥</div>
                <span>员工管理</span>
            </div>
            <div class="menu-item">
                <div class="menu-icon">🎁</div>
                <span>福利卡管理</span>
            </div>
            <div class="menu-item">
                <div class="menu-icon">🛒</div>
                <span>商品管理</span>
            </div>
            <div class="menu-item">
                <div class="menu-icon">📦</div>
                <span>订单管理</span>
            </div>
            <div class="menu-item">
                <div class="menu-icon">📈</div>
                <span>数据统计</span>
            </div>
            <div class="menu-item">
                <div class="menu-icon">⚙️</div>
                <span>系统设置</span>
            </div>
        </div>
        
        <div class="sidebar-footer">
            <div class="admin-avatar">管</div>
            <div class="admin-info">
                <div class="admin-name">张管理员</div>
                <div class="admin-role">超级管理员</div>
            </div>
        </div>
    </div>
    
    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- 顶部导航 -->
        <div class="top-nav">
            <h1 class="page-title">
                <div class="page-title-icon">👥</div>
                员工账号管理
            </h1>
            
            <div class="top-actions">
                <button class="action-btn">导出数据</button>
                <button class="action-btn" id="import-btn">批量导入</button>
                <button class="action-btn primary" id="add-btn">添加员工</button>
            </div>
        </div>
        
        <!-- 筛选区域 -->
        <div class="filter-section">
            <div class="filter-row">
                <div class="filter-group">
                    <label class="filter-label">员工姓名/工号</label>
                    <input type="text" class="filter-input" placeholder="请输入员工姓名或工号">
                </div>
                <div class="filter-group">
                    <label class="filter-label">所属部门</label>
                    <select class="filter-select">
                        <option value="">全部部门</option>
                        <option value="tech">技术部</option>
                        <option value="hr">人力资源部</option>
                        <option value="finance">财务部</option>
                        <option value="sales">销售部</option>
                        <option value="marketing">市场部</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label class="filter-label">账号状态</label>
                    <select class="filter-select">
                        <option value="">全部状态</option>
                        <option value="active">已启用</option>
                        <option value="inactive">已禁用</option>
                    </select>
                </div>
            </div>
            <div class="filter-actions">
                <button class="action-btn">重置</button>
                <button class="action-btn primary">查询</button>
            </div>
        </div>
        
        <!-- 批量操作区域 -->
        <div class="batch-section">
            <div class="batch-left">
                <div class="batch-select">
                    <input type="checkbox" id="select-all">
                    <label for="select-all">全选</label>
                </div>
                <div class="batch-actions">
                    <button class="batch-btn">批量启用</button>
                    <button class="batch-btn">批量禁用</button>
                    <button class="batch-btn danger">批量删除</button>
                </div>
            </div>
            <div class="total-text">共 248 个员工账号</div>
        </div>
        
        <!-- 数据表格区域 -->
        <div class="table-section">
            <table class="data-table">
                <thead>
                    <tr>
                        <th class="table-checkbox"><input type="checkbox" id="select-all-table"></th>
                        <th>员工信息</th>
                        <th>部门</th>
                        <th>职位</th>
                        <th>账号角色</th>
                        <th>账号状态</th>
                        <th>最后登录</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="table-checkbox"><input type="checkbox" class="row-checkbox"></td>
                        <td>
                            <div class="account-info">
                                <div class="account-avatar">张</div>
                                <div class="account-details">
                                    <div class="account-name">张三</div>
                                    <div class="account-id">EMP2023001</div>
                                </div>
                            </div>
                        </td>
                        <td>技术部</td>
                        <td>前端工程师</td>
                        <td><span class="role-badge role-employee">普通员工</span></td>
                        <td><span class="status-badge status-active">已启用</span></td>
                        <td>2023-09-20 14:30</td>
                        <td>
                            <div class="action-buttons">
                                <button class="action-btn-small primary">编辑</button>
                                <button class="action-btn-small warning">重置密码</button>
                                <button class="action-btn-small danger">禁用</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="table-checkbox"><input type="checkbox" class="row-checkbox"></td>
                        <td>
                            <div class="account-info">
                                <div class="account-avatar">李</div>
                                <div class="account-details">
                                    <div class="account-name">李四</div>
                                    <div class="account-id">EMP2023002</div>
                                </div>
                            </div>
                        </td>
                        <td>人力资源部</td>
                        <td>HR专员</td>
                        <td><span class="role-badge role-employee">普通员工</span></td>
                        <td><span class="status-badge status-active">已启用</span></td>
                        <td>2023-09-19 10:15</td>
                        <td>
                            <div class="action-buttons">
                                <button class="action-btn-small primary">编辑</button>
                                <button class="action-btn-small warning">重置密码</button>
                                <button class="action-btn-small danger">禁用</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="table-checkbox"><input type="checkbox" class="row-checkbox"></td>
                        <td>
                            <div class="account-info">
                                <div class="account-avatar">王</div>
                                <div class="account-details">
                                    <div class="account-name">王五</div>
                                    <div class="account-id">EMP2023003</div>
                                </div>
                            </div>
                        </td>
                        <td>财务部</td>
                        <td>财务主管</td>
                        <td><span class="role-badge role-manager">部门管理员</span></td>
                        <td><span class="status-badge status-active">已启用</span></td>
                        <td>2023-09-18 16:45</td>
                        <td>
                            <div class="action-buttons">
                                <button class="action-btn-small primary">编辑</button>
                                <button class="action-btn-small warning">重置密码</button>
                                <button class="action-btn-small danger">禁用</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="table-checkbox"><input type="checkbox" class="row-checkbox"></td>
                        <td>
                            <div class="account-info">
                                <div class="account-avatar">赵</div>
                                <div class="account-details">
                                    <div class="account-name">赵六</div>
                                    <div class="account-id">EMP2023004</div>
                                </div>
                            </div>
                        </td>
                        <td>销售部</td>
                        <td>销售代表</td>
                        <td><span class="role-badge role-employee">普通员工</span></td>
                        <td><span class="status-badge status-inactive">已禁用</span></td>
                        <td>2023-08-15 09:20</td>
                        <td>
                            <div class="action-buttons">
                                <button class="action-btn-small primary">编辑</button>
                                <button class="action-btn-small">启用</button>
                                <button class="action-btn-small danger">删除</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="table-checkbox"><input type="checkbox" class="row-checkbox"></td>
                        <td>
                            <div class="account-info">
                                <div class="account-avatar">钱</div>
                                <div class="account-details">
                                    <div class="account-name">钱七</div>
                                    <div class="account-id">EMP2023005</div>
                                </div>
                            </div>
                        </td>
                        <td>市场部</td>
                        <td>市场专员</td>
                        <td><span class="role-badge role-employee">普通员工</span></td>
                        <td><span class="status-badge status-active">已启用</span></td>
                        <td>2023-09-17 11:05</td>
                        <td>
                            <div class="action-buttons">
                                <button class="action-btn-small primary">编辑</button>
                                <button class="action-btn-small warning">重置密码</button>
                                <button class="action-btn-small danger">禁用</button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            
            <!-- 分页区域 -->
            <div class="pagination-section">
                <div class="pagination-info">显示 1-10 条，共 248 条</div>
                <ul class="pagination">
                    <li class="pagination-item">«</li>
                    <li class="pagination-item active">1</li>
                    <li class="pagination-item">2</li>
                    <li class="pagination-item">3</li>
                    <li class="pagination-item">4</li>
                    <li class="pagination-item">5</li>
                    <li class="pagination-item">...</li>
                    <li class="pagination-item">25</li>
                    <li class="pagination-item">»</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 菜单项点击效果
            const menuItems = document.querySelectorAll('.menu-item');
            menuItems.forEach(item => {
                item.addEventListener('click', function() {
                    menuItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                });
            });
            
            // 全选功能
            const selectAllCheckbox = document.getElementById('select-all');
            const selectAllTableCheckbox = document.getElementById('select-all-table');
            const rowCheckboxes = document.querySelectorAll('.row-checkbox');
            
            function updateSelectAllState() {
                const allSelected = Array.from(rowCheckboxes).every(checkbox => checkbox.checked);
                const someSelected = Array.from(rowCheckboxes).some(checkbox => checkbox.checked);
                
                selectAllCheckbox.checked = allSelected;
                selectAllTableCheckbox.checked = allSelected;
                selectAllCheckbox.indeterminate = someSelected && !allSelected;
                selectAllTableCheckbox.indeterminate = someSelected && !allSelected;
            }
            
            selectAllCheckbox.addEventListener('change', function() {
                rowCheckboxes.forEach(checkbox => {
                    checkbox.checked = this.checked;
                });
                updateSelectAllState();
            });
            
            selectAllTableCheckbox.addEventListener('change', function() {
                rowCheckboxes.forEach(checkbox => {
                    checkbox.checked = this.checked;
                });
                updateSelectAllState();
            });
            
            rowCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', updateSelectAllState);
            });
            
            // 操作按钮点击事件
            const addBtn = document.getElementById('add-btn');
            const importBtn = document.getElementById('import-btn');
            
            addBtn.addEventListener('click', function() {
                alert('打开添加员工账号弹窗');
            });
            
            importBtn.addEventListener('click', function() {
                alert('打开批量导入员工账号弹窗');
            });
            
            // 表格操作按钮点击事件
            const actionButtons = document.querySelectorAll('.action-buttons button');
            actionButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const row = this.closest('tr');
                    const accountName = row.querySelector('.account-name').textContent;
                    const accountId = row.querySelector('.account-id').textContent;
                    
                    if (this.textContent === '编辑') {
                        alert(`编辑员工账号: ${accountName} (${accountId})`);
                    } else if (this.textContent === '重置密码') {
                        if (confirm(`确定要重置 ${accountName} 的密码吗？`)) {
                            alert(`已重置 ${accountName} 的密码，新密码已发送到员工邮箱`);
                        }
                    } else if (this.textContent === '禁用') {
                        if (confirm(`确定要禁用 ${accountName} 的账号吗？`)) {
                            this.textContent = '启用';
                            this.classList.remove('danger');
                            row.querySelector('.status-badge').textContent = '已禁用';
                            row.querySelector('.status-badge').className = 'status-badge status-inactive';
                            alert(`已禁用 ${accountName} 的账号`);
                        }
                    } else if (this.textContent === '启用') {
                        if (confirm(`确定要启用 ${accountName} 的账号吗？`)) {
                            this.textContent = '禁用';
                            this.classList.add('danger');
                            row.querySelector('.status-badge').textContent = '已启用';
                            row.querySelector('.status-badge').className = 'status-badge status-active';
                            alert(`已启用 ${accountName} 的账号`);
                        }
                    } else if (this.textContent === '删除') {
                        if (confirm(`确定要删除 ${accountName} 的账号吗？此操作不可恢复！`)) {
                            row.remove();
                            alert(`已删除 ${accountName} 的账号`);
                        }
                    }
                });
            });
            
            // 分页点击效果
            const paginationItems = document.querySelectorAll('.pagination-item');
            paginationItems.forEach(item => {
                item.addEventListener('click', function() {
                    if (this.textContent === '«' || this.textContent === '»') return;
                    
                    paginationItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        });
    </script>
</body>
</html>